<!doctype html>
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>学生端课程信息</title>
		<meta name="description" content="Ela Admin - HTML5 Admin Template">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
		<link rel="stylesheet" href="assets/css/cs-skin-elastic.css">
		<link rel="stylesheet" href="assets/css/lib/datatable/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/style.css">

		<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
		<!--引入Vue-->
		<script src="assets/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
		
	</head>
	<body>
		<!-- Left Panel -->

		<aside id="left-panel" class="left-panel">
			<nav class="navbar navbar-expand-sm navbar-default">
			
					<div id="main-menu" class="main-menu collapse navbar-collapse">
						<ul class="nav navbar-nav">
			
							<li class="menu-title">菜单</li><!-- /.menu-title -->
							<li>
								<a href="stu-dataOfClass.html"> <i class="menu-icon fa fa-users"></i>班级 </a>
							</li>
							<li>
								<a href="stu-dataOfHomeworkinfo.html"> <i class="menu-icon fa fa-file-word-o"></i>已提交作业信息 </a>
							</li>
							<li>
								<a href="stu-dataOfHomeworktask.html"> <i class="menu-icon fa fa-file-word-o"></i>未完成的课堂任务 </a>
							</li>
							<li class="menu-title">退出</li><!-- /.menu-title -->
							<li>
								<a href="login.html"> <i class="menu-icon fa fa-user-o"></i>退出登录 </a>
							</li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</nav>
			</aside><!-- /#left-panel -->

		<!-- Left Panel -->

		<!-- Right Panel -->

		<div id="right-panel" class="right-panel">

			<!-- Header-->
			<header id="header" class="header">
				<div class="top-left">
					<div class="navbar-header">
						<a class="navbar-brand" href="#"><i class="menu-icon fa fa-user-circle fa-2x"></i></a>
					</div>
				</div>

			</header><!-- /header -->
			<!-- Header-->

			<div class="breadcrumbs">
				<div class="breadcrumbs-inner">
					<div class="row m-0">


					</div>
				</div>
			</div>

			<div class="content">
				<div class="animated fadeIn">
					<div class="row">

						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<strong class="card-title">当前未完成的作业</strong>

								</div>
								<div class="card-body" id="tbytask">
									<table id="bootstrap-data-table" class="table table-striped table-bordered">
										<!--add element here-->
										<!--这里是选择分页-->
										<!--数据段-->
										 <span class="badge badge-info">当前选择的班级是：{{currentclass}}</span>
										<thead>
											<tr>
												<th>作业轮数</th>
												<th>作业编号</th>						
												<th>作业备注</th>
												<th>修改作业</th>
											</tr>
										</thead>
										<tbody >
											<tr v-for="(item,index) in homeworkpri">
												<td>{{item.num}}</td>
												<td>{{item.taskid}}</td>
												<td>{{item.note}}</td>
												<td>
													<input  class="btn btn-success" type="button" value="Modify" @click="ModifyHw(item.write,item.num)">
												</td>
											</tr>
										</tbody>


									</table>
									<!--
									<div class="row" id="pages">
										<div class="col-sm-12 col-md-5">
											<div class="dataTables_info" id="bootstrap-data-table_info" role="status" aria-live="polite">
												Showing {{pages.beginPages}} to {{pages.endPages}} of {{pages.sumPages}} entries
											</div>
										</div>
										<div class="col-sm-12 col-md-7">
											<div class="dataTables_paginate paging_simple_numbers" id="bootstrap-data-table_paginate">
												<ul class="pagination">
													<li class="paginate_button page-item previous disabled" id="bootstrap-data-table_previous">
														<a href="#" aria-controls="bootstrap-data-table" data-dt-idx="0" tabindex="0" class="page-link">
															Previous
														</a>
													</li>
													<li class="paginate_button page-item active">
														<a href="#" aria-controls="bootstrap-data-table" data-dt-idx="1" tabindex="0" class="page-link">
															1
														</a>
													</li>
													<li class="paginate_button page-item next disabled" id="bootstrap-data-table_next">
														<a href="#" aria-controls="bootstrap-data-table" data-dt-idx="2" tabindex="0" class="page-link">
															Next
														</a>
													</li>
												</ul>
											</div>
										</div>
									</div>
									
									-->
								</div>
							</div>
						</div>


					</div>
				</div><!-- .animated -->
			</div><!-- .content -->


			<!-- /#right-panel -->

			<!-- Right Panel -->

			<!-- Scripts -->
			<!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
    <script src="assets/js/main.js"></script> -->

			<!--
     
    <script src="assets/js/lib/data-table/dataTables.bootstrap.min.js"></script> 
    <script src="assets/js/lib/data-table/dataTables.buttons.min.js"></script> 
    <script src="assets/js/lib/data-table/buttons.bootstrap.min.js"></script> 
      
    
    <script src="assets/js/lib/data-table/buttons.html5.min.js"></script> 
    <script src="assets/js/lib/data-table/buttons.print.min.js"></script> 
    <script src="assets/js/lib/data-table/buttons.colVis.min.js"></script> 
    <script src="assets/js/init/datatables-init.js"></script>

-->
			<script>
				let vm = new Vue({
					el: '#tbytask',
					data: {
						homeworktasks: [
						],//这里已经分别存了5个task 接下来只需要遍历response的unfinished
						homeworkpri: [	
						],
						currentclass:window.localStorage.getItem('SselectClassName')
					},
					watch:{
						homeworktasks:function(val){
							this.getAnswer();
						}
					},
					mounted(){
						this.GetNewPages();
					},
					methods: {
						getAnswer(){
							//看看已完成的作业有哪几轮，有就不显示.
							console.log('homeworktasks:');
							console.log(this.homeworktasks);
							var username1 = window.localStorage.getItem('SUsername');
							var cid1 = window.localStorage.getItem('SselectClass');
							axios.get(
									'http://172.81.214.138:8000/student_work_number?username='+username1+'&classid='+cid1)
								//成功返回
								.then(response => {
									console.log('response:');
									console.log(response);
									if(response.data.state==1){
										var j=0;
										for(var i=0; i<this.homeworktasks.length;i++){ //这里是task总数是5
										let num=this.homeworktasks[i].num;
										let taksid=this.homeworktasks[i].taskid;
										let note=this.homeworktasks[i].note;
												if(this.homeworktasks[i].num==response.data.data.unfinishedwork[j]){
													console.log(num);
													console.log(taksid);
													console.log('note');
													//响应式添加数组信息
													Vue.set(vm.homeworkpri, j, vm.homeworktasks[i])
													
												  j++;
												  }
												else{
													//console.log('没用');
												  }
										        }
										console.log('end');
										console.log(this.homeworkpri);
										return;
									}
									else{
										alert('获取失败！');
										return;
									}
								})
								//失败返回
								.catch(error => {
									console.log(error);
								})
						}
						,
						GetNewPages(){
							var username = window.localStorage.getItem('SUsername');
							var cid = window.localStorage.getItem('SselectClass');	
							axios.get(
									'http://172.81.214.138:8000/task_search?classid='+cid)
								//成功返回
								.then(response => {
									console.log(response);
									if(response.data.state==1){
										//alert('获取成功');
												//console.log(response);
										this.homeworktasks=response.data.data;
									}
									else{
										alert('登录失败！');
										return;
									}
								})
								//失败返回
								.catch(error => {
									console.log(error);
								})	
								
						},
						ModifyHw(write,number){
							//window.localStorage.setItem('hwwrite',write);
							window.localStorage.setItem('number',number);
							window.localStorage.setItem('ist',1);
							window.location.assign('stu-dataOfHomeworkgit.html');
						}
						
					}
				})
			</script>
			<!--
			<script type="text/javascript">
				let vm = new Vue({
					el: '#pages',
					data: {
						pages: { //翻页
							beginPages: 1,
							endPages: 2,
							sumPages: 3
						}
					},
					methods: {}
				})
			</script>
			-->

	</body>
</html>
